<template>
  <div class="page-version">
    <div class="page-version-title">
      <div class="page-version-title-num">当前版本：{{ versionState.version }}</div>
      <div class="relative blue-text" v-if="isNewVersion">
        最新版本：{{ versionState.new_version }}
        <div class="absolute top-[-40px] w-max py-[4px] px-[8px] rounded-[2px] tooltip">
          发现新版本
          <div class="arrow"></div>
        </div>
      </div>
      <!--
        <a-tooltip v-model:visible="isNewVersion" color="#ffdede" placement="top" overlayClassName="editor-tooltip">
        <template #title>发现新版本</template>
        <div class="page-version-title-num" :class="isNewVersion ? 'blue-text' : ''">
          最新版本：{{ versionState.new_version }}
        </div>
      </a-tooltip>
       -->
    </div>
    <div v-if="isNewVersion" class="page-version-content">
      <div class="page-version-content-title"><info-circle-outlined class="icon" /> <span>更新内容</span></div>
      <div class="page-version-content-list" v-if="versionState.update_content">
        <div class="page-version-content-list-item">
          <span>{{ versionState.update_content }}</span>
        </div>
      </div>
      <!-- <div class="page-version-content-list">系统更新与优化</div> -->
    </div>
    <div
      v-else
      class="w-[192px] h-[48px] bg-[rgba(0,168,112,0.07)] text-[#00A870] text-center leading-[48px] font-bold"
    >
      当前已是最新版本！
    </div>
  </div>
  <div class="bottom-btn">
    <a-button type="primary" @click="updateOnline" v-if="isNewVersion">立即更新</a-button>
  </div>
  <a-modal
    v-model:visible="updateVisible"
    :footer="null"
    :width="550"
    :closable="false"
    :afterClose="handleClose"
    :maskClosable="false"
    class="relative update-dialog"
    dialogClass="dialog"
    @cancel="handleCancel"
  >
    <img src="@/assets/icon/version.png" class="select-none absolute top-[-43px] left-0 w-full" />
    <div class="absolute top-[26px] left-[65px] text-[24px] text-[#fff] flex flex-col">
      <span class="font-bold tracking-[1.2px]">{{ isUpgradeLoading ? '升级中...' : '发现新版本' }}</span>
      <span v-if="!isUpgradeLoading" class="text-[18px] tracking-[0.9px]">{{ versionState.new_version }}</span>
    </div>
    <div v-if="!isUpgradeLoading">
      <div class="step">
        <div class="step-content">
          <div class="step-content-list mt-[140px] text-[#595959] w-full">
            <div>更新内容：</div>
            <div class="step-content-list-item my-[8px] w-full">
              {{ versionState.update_content }}
            </div>
            <div class="text-[12px] text-[#bfbfbf]">更新期间，管理后台将无法使用，请勿刷新浏览器。</div>
          </div>
        </div>
      </div>
      <div class="bottom-btn">
        <a-button type="primary" class="m-l-16" :loading="loading" @click="startUpdate">立即更新</a-button>
        <a-button type="info" class="m-l-16" :loading="loading" @click="() => (updateVisible = false)"
          >稍后更新</a-button
        >
      </div>
    </div>
    <div v-else class="h-[296px]">
      <div class="pt-[30px] w-full h-[360px] flex flex-col items-center justify-center">
        <a-spin :indicator="indicator" />
        <div class="text-[#595959] mt-[20px]">正在升级中，请稍后...</div>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, watch, h } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
import apis from '@/apis'
import { layoutState } from '@/views/layouts/state'
const {
  system: { upgradeVersion, get_upgrade_info }
} = apis
interface IVersionState {
  version: string
  new_version: string
  update_content: string
}
const loading = ref(false)
const isUpgradeLoading = ref(false)
const versionState = reactive<IVersionState>({
  version: '',
  new_version: '',
  update_content: ''
})
const isShow = ref(true)
const checkLoading = ref(false)
const successStatus = ref(0)
const updateVisible = ref(false)
const updateStatus = ref(1) //1:本地更新包 2:开始更新 重新上传 3:
const updateList = reactive([
  '更新影人,按照名称排序。避免影人表出现非主演排在前面位置；',
  '对人气值算法进行了调整；',
  '其它性能优化；'
])
const stepTextLIst = reactive([
  '更新影人,按照名称排序。避免影人表出现非主演排在前面位置；',
  '对人气值算法进行了调整；',
  '其它性能优化；'
])
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '46px'
  },
  spin: true
})
//打开在线升级弹窗提示
const updateOnline = () => {
  updateVisible.value = true
}
//在线更新-modal
const startUpdate = () => {
  updateStatus.value = 2
  loading.value = true
  upgradeVersion()
    .then((res: any) => {
      isUpgradeLoading.value = true
      console.log('res: ', res)
      loading.value = false
      createSetInterval()
    })
    .catch(() => {
      loading.value = false
      updateStatus.value = 3
      // isUpgradeLoading.value = true
      //开启轮询
      // createSetInterval()
    })
}
/**
 * 是否有新版本
   true 是有新版本  false无新版本
 */
const isNewVersion = computed(() => {
  if (versionState.new_version && versionState.new_version != versionState.version) return true
  return false
})
watch(
  () => layoutState.side.collapsed,
  (val) => {
    console.log('val1: ', val)
    if (val) return (isShow.value = false)
    isShow.value = true
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => updateVisible.value,
  (val, oldVal) => {
    if (val != oldVal) {
      updateStatus.value = 1
    }
  },
  { deep: true }
)
//弹窗关闭事件
const handleClose = () => {
  isUpgradeLoading.value = false
  stopSetInterval()
}
const handleCancel = () => {
  updateVisible.value = false
  stopSetInterval()
}
//获取版本更新信息
const getUpgradeInfo = () => {
  checkLoading.value = true
  get_upgrade_info()
    .then((res: any) => {
      console.log('res: ', res)
      Object.assign(versionState, res)
    })
    .catch(() => {})
}
const timer = ref()
const createSetInterval = () => {
  stopSetInterval()
  timer.value = setInterval(() => {
    getUpgradeInfo()
  }, 5000)
}
// 关闭轮询
const stopSetInterval = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}
watch(
  () => versionState,
  (val: any) => {
    if (val.new_version && val.new_version != val.version) {
      // isUpgradeLoading.value = true
      successStatus.value = 1
    } else {
      // isUpgradeLoading.value = false
      successStatus.value = 2
    }
  },
  { deep: true, immediate: true }
)
onMounted(() => {
  getUpgradeInfo()
})
onUnmounted(() => {
  stopSetInterval()
})
</script>

<style lang="less">
.editor-tooltip {
  .ant-tooltip-inner {
    color: #fe4c4d !important;
  }
}
</style>
<style lang="less" scoped>
@update-color: #fe4c4d;
.editor-tooltip {
  .ant-tooltip-inner {
    color: @update-color !important;
  }
}
:deep(.ant-modal-body) {
  background-color: #fff;
  padding: 0 !important;
  min-height: 360px !important;
  height: 360px !important;
}
:deep(.ant-modal) {
  position: relative;
  top: 31%;
}
.update-dialog {
  padding: 0 !important;
  .step {
    width: 100%;
    &-tip {
      min-height: 48px;
      background: #ffdede;
      border: 0.5px solid @update-color;
      border-radius: 3px;
      font-size: 14px;
      padding: 14px 16px;
      box-sizing: border-box;
      margin-bottom: 24px;
      &-icon {
        color: @update-color;
      }
      &-title {
        font-size: 14px;
        color: @update-color;
        font-weight: 500;
        margin-left: 8px;
        &-num {
        }
      }
      &-text {
        font-size: 14px;
        color: @update-color;
        font-weight: 400;
        margin-left: 8px;
      }
    }
    &-content {
      min-height: 220px;
      border-radius: 3px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      &-list {
        &-item:not(:last-child) {
          margin-bottom: 5px;
        }
      }
      &-confirmText {
        font-size: 14px;
        color: #262626;
        font-weight: 500;
        padding-top: 32px;
        display: flex;
        align-items: center;
      }
    }
  }
  .bottom-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .m-l-16 {
      margin-left: 16px;
    }
    .m-l-26 {
      margin-left: 26px;
    }
    &-info {
      font-size: 14px;
      color: #595959;
      line-height: 32px;
      &-text {
        margin-left: 10px;
      }
    }
  }
}
.page-version {
  padding: 32px 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(232, 232, 232, 1);
  &-title {
    width: 328px;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    color: #262626;
    // margin-bottom: 24px;

    margin: 10px 0 24px;
    .blue-text {
      color: #0083ff;
      .tooltip {
        color: #fe4c4d;
        background-color: #ffdede;
        border: 1px solid #fe4c4d;
        position: relative;
        .arrow {
          position: absolute;
          display: block;
          width: 13.07106781px;
          height: 13.07106781px;
          overflow: hidden;
          background: transparent;
          pointer-events: none;
          top: 39%;
          -webkit-clip-path: polygon(0 0, 0% 0, 0% 50%, 52% 49%, 55% -12%, 49% 100%, 0 100%);
          clip-path: polygon(0 0, 0% 0, 0% 50%, 52% 49%, 55% -12%, 49% 100%, 0 100%);
          background-color: #ffdede;
          transform: translateY(60%) translateX(200%) rotate(-45deg);
          border: 1px solid #fe4c4d;
        }
      }
    }
  }
  &-content {
    width: 100%;
    min-height: 116px;
    padding: 14px 16px;
    background: #f7fbff;
    border: 0.5px solid rgba(0, 131, 255, 1);
    border-radius: 3px;
    font-size: 14px;
    &-title {
      color: #262626;
      font-weight: 500;
      display: flex;
      align-items: center;
      .icon {
        color: #0083ff;
        margin-right: 8px;
        font-size: 18px;
      }
    }
    &-list {
      margin-top: 8px;
      padding-left: 26px;
    }
  }
}
.bottom-btn {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
  .m-l-16 {
    margin-left: 16px;
  }
}
</style>
